<template>
  <div>
    <header>
      <div class="banxin">
        <ul>
          <li>
            <span
              class="loginLeft"
              v-show="this.$store.state.trueFalse == false"
              @click="loginsss"
              >登录</span
            >

            <el-popover placement="top" width="160" v-model="visible">
              <p>确定退出登录吗?</p>
              <div style="text-align: right; margin-top: 8px">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="visibless"
                  >确定</el-button
                >
              </div>
              <span
                slot="reference"
                class="loginLeft"
                v-show="this.$store.state.trueFalse == true"
                >欢迎{{ this.$store.state.username }}</span
              > </el-popover
            >|
            <span class="loginRight" @click="registerDialogVisible = true"
              >注册</span
            >
          </li>
          <li>
            <span @click="Orders">我的订单</span>
          </li>
          <li>
            <span @click="Collection">我的收藏</span>
          </li>
          <li>
            <span @click="shoppingCarts" :class=" this.$store.state.cartLists.length!==0?'col':''">
              <i class="el-icon-place"></i> 购物车({{
                this.$store.state.cartList.length
              }})
            </span>
          </li>
        </ul>
      </div>
    </header>
    <!-- 注册对话框 -->
    <el-dialog title="注册" :visible.sync="registerDialogVisible" width="300px">
      <el-form :model="formList" :rules="formRules" ref="formName">
        <el-form-item prop="username">
          <el-input
            v-model="formList.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formList.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passwords">
          <el-input
            v-model="formList.passwords"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 100%" @click="registers"
          >注册</el-button
        >
      </span>
    </el-dialog>
    <Login :booleans="loginDialogVisible" @bools="bools"></Login>
    <!-- <Login></Login> -->

    <!-- 切换页面和搜索 -->
    <nav class="banxin">
      <img src="/imgs/logo.png" alt />
      <div class="routers">
        <router-link to="index">首页</router-link>
        <router-link to="goods">全部商品</router-link>
        <router-link to="about">关于我们</router-link>
      </div>
      <div class="searchs">
        <el-input
          placeholder="请输如搜索内容"
          v-model="search"
          class="searchInp"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchClick"
          ></el-button>
        </el-input>
      </div>
    </nav>
  </div>
</template>

<script>
import API from "../../API/Api";
export default {
  name: "",
  data() {
    // 正则验证
    var checkUsername = (rule, value, callback) => {
      var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      API.register(this.formList.username).then((res) => {
        this.code = res.code;
      });
      if (this.code == "004") {
        return callback(new Error("用户名已经存在，不能注册"));
      }
      if (reg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    //密码验证
    var checkPassword = (rule, value, callback) => {
      var mobileReg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      if (mobileReg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    var checkPasswords = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formList.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      search: "",
      loginDialogVisible: false,
      registerDialogVisible: false,
      formList: {
        username: "",
        password: "",
        passwords: "",
      },
      LoginList: {
        username: "",
        password: "",
      },
      code: 0,
      formRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: checkUsername, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" },
        ],
        passwords: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPasswords, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    searchClick() {
      //  this.search 当前搜索的内容
      this.$router.push({ path: "/goods", query: { search: this.search } });
      this.search = "";
    },
    // admin() {
    //   // console.log(this.formList.username)
    // },
    registers() {
      this.$refs.formName.validate((valid) => {
        if (!valid) {
          return;
        }
        API.registerse({
          userName: this.formList.username,
          password: this.formList.password,
        }).then((res) => {
          console.log(res.msg);
          if ((res.msg = "注册成功")) {
            this.$notify.success({
              title: "注册成功",
              message: "这是一条成功的提示消息",
            });
            this.registerDialogVisible = false;
            return;
          } else {
            this.$notify.error({
              title: "注册错误",
              message: "这是一条错误的提示消息",
            });
            return;
          }
        });
      });
    },
    // 点击弹出框
    loginsss() {
      this.loginDialogVisible = true;
      console.log(this.loginDialogVisible);
    },
    // 取消弹出框
    bools() {
      this.loginDialogVisible = false;
    },
    // 点击确定退出登录
    visibless() {
      this.visible = false;
      this.$notify.success({
        title: "退出成功",
        message: "这是一条成功的提示消息",
      });
      this.$store.commit("visibleClick", this.visible);
    },
    // 判断是否登录
    Collection() {
      console.log(this.$store.state.trueFalse);
      if (this.$store.state.trueFalse) {
        return this.$router.push("collect");
      } else {
        return (this.loginDialogVisible = true);
      }
    },
    Orders() {
      console.log(this.$store.state.trueFalse);
      if (this.$store.state.trueFalse) {
        return this.$router.push("order");
      } else {
        return (this.loginDialogVisible = true);
      }
    },
    shoppingCarts() {
      console.log(this.$store.state.trueFalse);
      if (this.$store.state.trueFalse) {
        return this.$router.push("shoppingCart");
      } else {
        return (this.loginDialogVisible = true);
      }
    },
  },
  computed: {},
  components: {},
  watch: {},
  getters: {},
};
</script>

<style scoped>
header {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
header ul {
  list-style: none;
  color: #b0b0b0;
  display: flex;
  float: right;
}
header ul li {
  line-height: 40px;
  font-size: 14px;
  margin-left: 20px;
}
.loginLeft {
  margin-right: 10px;
}
.loginRight {
  margin-left: 10px;
}
.banxin {
  width: 1225.5px;
  margin: 0 auto;
}
nav {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b0b0b0;
}
.routers {
  margin-right: 280px;
}
.routers a {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  padding: 20px;
}
.routers a:hover {
  color: #303133;
}
header span:hover {
  color: #fff;
}
.col{
  display: block;
  height: 100%;
  width: 100px;
  background: orange;
  color: #fff;
  text-align: c;
}
</style>